<template>
    <div class="header">
       <img src="https://img.alicdn.com/tfs/TB10aMXfaNj0u4jSZFyXXXgMVXa-500-128.svg" alt="暂无图片" class="logo">

       <!-- 头像 -->
       <div class="header-r">
        <el-dropdown class="el-drop" >
         <span class="el-dropdown-link">
           <img :src="userImgUrl+store.state.userinfo.userimg" alt="" class="userimg" style="background-color: rgb(255, 255, 255);">
         </span>
         <template #dropdown>
            <el-dropdown-menu class="drop-menu"  slot="dropdown">
            <el-dropdown-item><p @click="router.push('/userinfo')" >个人主页</p></el-dropdown-item>
            <el-dropdown-item ><p @click="showLogoutDialog">退出登录</p></el-dropdown-item>
            
            </el-dropdown-menu>
         </template>
      </el-dropdown>
       </div>
    </div>
<!-- 退出登录对话框 -->
<el-dialog
    v-model="logoutVisible"
    title="退出登录"
    width="30%"
    align-center
  >
    <span>你确定要退出登录吗?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="logoutVisible = false">取消</el-button>
        <el-button type="primary" @click="logout">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


 </template>
 
 <script setup lang="ts">

import { onMounted ,ref} from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import {useStore} from 'vuex'
import LoginApi from '@/api/login';
import {userImgUrl} from '@/config/imgconfig'

const router = useRouter()
const store = useStore()
 onMounted(()=>{
    createWebSocket()
 })
 
//建立ws连接
const createWebSocket=()=>{
    const socket = new WebSocket("ws://localhost/elm") 
  
      socket.onopen = function() {
        // 连接成功
        console.log("ws链接建立成功！");
      };
 
      socket.onmessage = function(event) {
      // 接收到消息
        const message = event.data;
        console.log(message);
      };
      
      socket.onclose = function(event) {
        // 连接关闭
        const code = event.code;
        const reason = event.reason;
      };
      
      socket.onerror = function(error) {
        // 处理错误
      };


}

//头像src


//退出登录对话框flag
const logoutVisible = ref(false)
//显示退出登录=弹窗
const showLogoutDialog=()=>{
   logoutVisible.value = true;
}
//退出登录
const logout = async ()=>{
   console.log("hhhhhh");
   //发请求清除用户数据，
   const res = await LoginApi.logout(store.state.userinfo.username)
   if(res.code===200){
   //清除vuex中的所有数据
      store.commit('delUserinfo')
      //跳转到登录页面
      localStorage.removeItem('token')
      router.push('/login')
      logoutVisible.value = false;
      
      logoutMsg()
   }
   
}

const logoutMsg = () => {ElMessage({ message:'已退出登录', type: 'success', })}

 
 </script>
 
 
 <style scoped lang="less">
 
    .header{
     width:100%;
     height: 60px;
     background-color: rgb(244, 254, 255);
    }
 
 .logo{
   width:200px;
   height: 45px;
   margin-left: 20px;
   margin-top: 10px;
   float: left;
 }
.header-r{
   margin-left: 1450px;
   height: 50px;
   width:50px
}
//头像下来菜单
.el-drop{
   width:50px;
}

.userimg{
   width:50px;
   height: 50px;
   border-radius: 50%;
}



 </style>